<template>
<!-- <div class="wrapper" ref="wrapper"> -->
    
  
  <div class="playlist">
    <h3>官方歌单</h3>
    <ul class="content" ref="content">
      <li v-for="item in playlistData" :key="item.content_id">
        <img :src="item.cover" alt="" /><br>
        <span>{{ item.title }}</span>
      <>
      <!-- <li v-for="item in data" :key="item.id">{{item}}<> -->
    </ul>
  </div>
  <!-- </div> -->
</template>

<script>
import axios from "axios";
// import BScroll from 'better-scroll'

export default {
  data() {
    return {
      playlistData: [],
    //   data:[]
    };
  },
  created() {
    this.getplaylist();
    // this.getRecommendBanner();
  },
  methods: {
    getplaylist() {
      axios.get("/api/recommendaylist/u")
        .then((res) => {
          console.log(res.data.data.list);
          this.playlistData = res.data.data.list;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // getRecommendBanner() {
    //   axios
    //     .get(url, "")
    //     .then((res) => {
    //       // console.log(res);
    //       this.data = res.data.data; 
    //       this.betterScrollHorizontal(this.data.length,160)
    //     })
    //     .catch((err) => {
    //       console.error(err);
    //     });
    // },
    // betterScrollHorizontal(num, itemWidth) {      
    //   let width = num * itemWidth;
    //   this.$refs.content.style.width = width + "px";
    //   this.$nextTick(() => {
    //     this.scroll = new BScroll(this.$refs.wrapper, {
    //       click: true,
    //       startX: 0,
    //       scrollX: true,//横向为true
    //       scrollY: false,
    //     });
    //   });
    // },
  },
//   mounted() {
//       this.$nextTick(() => {
//         this.scroll = new BScroll(this.$refs.wrapper, {})
//       })
//     }
};

</script>
<style scoped>

</style>
